<template>
    <div>
        <!-- 添加新用户的按钮 -->

        <el-button margin-bottom="15px" type="primary" @click="dialogVisible = true">添加新用户</el-button>
      <!-- 用户的表格 -->
        <el-table :data="userList" stripe >
        <!-- 索引列 -->
            <el-table-column type="index" label="#"></el-table-column>
        <!-- 渲染用户名这一列 -->
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="position" label="头衔"></el-table-column>
            <el-table-column label="创建时间">
                
                <template v-slot="scope">
                    {{scope.row.addtime | dateFormat}}
                </template>
            </el-table-column>
            <el-table-column prop="position" label="操作">
                <template v-slot:default="{row}">
                    <div>
                        <router-link :to="'/users/' + row.id">详情</router-link>&nbsp;
                        <a href="#" @click.prevent="onRemove(row.id)">删除 --{{row.id}}</a>

                    </div>
                </template>
            </el-table-column>
        
        </el-table>

        <!-- 添加用户的对话框 -->
        <el-dialog title="添加新用户" :visible.sync="dialogVisible" width="50%" @close="onDialogClosed ">
            <!-- 添加用户的表单 -->
            <el-form :model="form" :rules="formRules" label-width="80px" ref="myaddForm">
            <!-- 采集用户的姓名 -->
            <el-form-item label="用户姓名" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="用户年纪" prop="age">
                <el-input v-model.number="form.age"></el-input>
            </el-form-item>
            <el-form-item label="用户头衔" prop="position">
                <el-input v-model="form.position"></el-input>
            </el-form-item>
            </el-form>
            
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onAddNewUser">确 定</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
export default {
    name: 'UserList',
    data() {

        //声明校验年龄的函数
        var checkAge = (rule, value, cb) => {
            // value = Number(value)
            if (!Number.isInteger(value)) {
                return cb(new Error('请填写整数！'))
            }
            if (value > 100 || value < 1) {
                return cb(new Error('年龄必须在1到100之间!'))
            }
            cb()
        }
        return {
            userList: [],
            // 控制默认对话框的显示隐藏
            dialogVisible: false,

            //要采集的用户信息对象
            form: {
                name: '',
                age: '',
                position:'',
            },
            //表单的验证规则对象
            formRules: {
                name: [
                    { required: true, message: '姓名是必填项', trigger: 'blur' },
                    {min:1,max:15,message:'长度在1到15个字符',trigger:'blur'}
                ],
                age: [
                    { required: true, message: '年龄是必填项', trigger: 'blur' },
                    {validator:checkAge,trigger:'blur'},
                ],
                position: [
                    { required: true, message: '头衔是必填项', trigger: 'blur' },
                    {min:1,max:15,message:'长度在1到15个字符',trigger:'blur'}
                ]
            }
        }
    },
    created() {
        this.getUserList()        
        
    },
    methods: {
        //获取用户列表的数据
        async getUserList() {
            const { data: res } = await this.$http.get('/api/users')
            if (res.status !== 0) return console.log('用户类别数据获取失败！')
            this.userList = res.data
            console.log(res.data)
        },
        //监听对话框关闭的事件
        onDialogClosed() {
            //拿到Form组件的引用 调用resetFields函数 即可重置表单
            this.$refs.myaddForm.resetFields()
        },
        //用户点击了添加按钮
        onAddNewUser() {
            this.$refs.myaddForm.validate(async valid => {
                if (!valid) return
                //需要执行添加的业务处理
                const { data: res } = await this.$http.post('/api/users', this.form)
                if (res.status !== 0) return this.$message.error('添加失败！')
                this.$message.success('添加成功~')
                this.dialogVisible = false
                this.getUserList()
            })
        },
        //点击了删除的链接
        async onRemove(id) {
            const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).catch(err => err)
            //判断是否点击了确认按钮
            if(confirmResult !== 'confirm') return this.$message.info('取消了删除')
            const { data:res} = await this.$http.delete('/api/users/' + id)
            if(res.status !==0) return this.$message.error('删除失败！')
            this.$message.success('删除成功！')
            this.getUserList()
            },
                handleClose(done) {
                // 报的是eslint 检查错误， 定义的变量，未使用命名
                this.$confirm('确认关闭？')
                    .then(_ => {
                        console.log(_)
                        done();
                    })
                    .catch(err => console.log(err));
            },
        }
}
</script>

<style scoped lang="less">
.el-table{
    margin-top: 15px;
}
</style>

